<template>
  <div>
    <div class="attr-item-edit-wrapper dataPage">
      <p class="attr-item-title">设置来源</p>
      <div class="flexG-1 attr-item-edit-input">
        <el-select v-model="fromData" size="mini">
          <el-option label="静态数据" value="1">静态数据</el-option>
          <el-option label="API" value="2">API</el-option>
        </el-select>
      </div>
    </div>
    <!-- <globalDataTemplate :xAxisData="xAxisData" :seriesData="seriesData" listType="1"  @addItem="addItem" @removeItem="removeItem" /> -->
    <div class="inputminiPadding">
      <!-- 多系列循环 -->
      <!-- <div v-for="(item,index) in xAxisData" :key="'item' + index" style="padding-bottom: 10px;">
      <div class="attr-item-edit-wrapper" v-for="(item2,index2) in seriesData" :key="'item' + index2">
        <template>
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">x</div>
            <el-input placeholder="x" v-model="xAxisData[index]" size="mini" class="input-with-select">
            </el-input>
          </div>
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">y</div>
            <el-input placeholder="y" v-model.number="seriesData[index2].value" size="mini" class="input-with-select">
            </el-input>
          </div>
        </template>
        <div class="closeBtn" @click="removeItem(index)">
          <i class="el-icon-delete"></i>
        </div>
      </div>
    </div> -->

      <!-- <div
        class="attr-item-edit-wrapper"
        v-for="(item, index) in seriesData"
        :key="index"
      >
        <div class="flexG-1 attr-item-edit-input">
          
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">份数</div>
            <el-input
              placeholder="x"
              v-model="seriesData[index].name"
              size="mini"
              class="input-with-select"
            >
            </el-input>
          </div>
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">数值</div>
            <el-input
              placeholder="y"
              v-model.number="seriesData[index].value"
              size="mini"
              class="input-with-select"
            >
            </el-input>
          </div>
        </div>
      </div> -->


      <div class="attr-item-edit-wrapper" v-for="(item2,index) in seriesData" :key="'item' + index">
        <template>
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">x</div>
            <el-input placeholder="x" v-model="seriesData[index].name" size="mini" class="input-with-select">
            </el-input>
          </div>
          <div class="flexG-1 attr-item-edit-input">
            <div class="flexGrowTitle">y</div>
            <el-input placeholder="y" v-model.number="seriesData[index].value" size="mini" class="input-with-select">
            </el-input>
          </div>
        </template>
        <div class="closeBtn" @click="removeItem(index)">
          <i class="el-icon-delete"></i>
        </div>
      </div>




      <!-- <div
        class="flexG-1 attr-item-edit-input"
        v-for="(item, index2) in seriesData"
        :key="'item' + index2"
      >
        <div class="flexGrowTitle">y</div>
        <el-input
          placeholder="y"
          v-model.number="seriesData[index2].value"
          size="mini"
          class="input-with-select"
        >
        </el-input>
      </div> -->

      <div class="addBtn">
        <el-button type="text" @click="addItem()">
          <i class="el-icon-circle-plus-outline"></i> 添加
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import globalDataTemplate from "../../globalDataTemplate";
export default {
  name: "circle-pie-chart-data",
  components: {
    globalDataTemplate
  },
  props: {
    value: Object
  },
  data() {
    return {
      fromData: "1",
      addNum:0
    };
  },
  computed: {
    ...mapState({
      projectData: state => state.editor.projectData,
      activePageUUID: state => state.editor.activePageUUID,
      activeElementUUID: state => state.editor.activeElementUUID,
      activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      "currentPageIndex",
      "activeElementIndex",
      "activeElement",
      "activePage"
    ]),
    seriesData() {
      let s = this.activeElement.propsValue.circlePieChartForm.series[0].data;
      return s;
    }
  },

  methods: {
    addItem() {
      let obj ={
        name:String(this.addNum++),
        value:null
      }
      this.seriesData.push(obj)
      this.$bus.$emit("addItem")
    },
    removeItem(index) {
      this.seriesData.splice(index, 1)
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss">
.dataPage {
  .el-select {
    width: 100%;
  }
}
</style>
<style lang="scss" scoped>
.attr-item-edit-wrapper {
  // padding-left: 18px;
  align-items: center;
  display: flex;
  width: 100%;
  // text-align: center;
  padding-bottom: 6px;

  .attr-item-title {
    text-align: left;
    min-width: 60px;
    font-size: 12px;
  }

  .attr-item-edit-input {
    display: flex;
    align-items: flex-end;

    .flexGrowTitle {
      padding-right: 4px;
    }

    &.flexG-1 {
      flex-grow: 1;
      margin-left: 10px;
    }

    .attr-item-edit-input-des {
      text-align: center;
      line-height: 1;
      margin-top: 2px;
      font-size: 12px;
      color: $gray;
    }
  }
}
  .closeBtn{
    padding-left: 10px;
  }
  .addBtn {
    text-align: center;
  }
</style>